import React, {
  Component,
} from 'react';
import PropTypes from 'prop-types';

export default class Pagination extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPageIndex: 0,
      pageLimit: 35,
      totalPagesCount: props.totalPagesCount,
    };
    this.navigateTo = this.navigateTo.bind(this);
    this.navigateToPrevious = this.navigateToPrevious.bind(this);
    this.navigateToNext = this.navigateToNext.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      currentPageIndex: nextProps.currentPageIndex,
      pageLimit: nextProps.pageLimit,
      totalPagesCount: nextProps.totalPagesCount,
    });
  }

  leftMoveArray(array) {
    array.forEach((item, index) => {
      array[index] = item - 1;
    }, this);
  }

  rightMoveArray(array) {
    array.forEach((item, index) => {
      array[index] = item + 1;
    }, this);
  }

  renderNavButtons(currentPageIndex, totalPagesCount) {
    const initShowIndexes = [];
    for (let i = 0; i < totalPagesCount; i++) {
      initShowIndexes.push(i);
    }
    let toShowIndexes = [];
    if (totalPagesCount > 7) {
      toShowIndexes = initShowIndexes.filter((item, index) => index >= totalPagesCount / 2 - 2 && index < totalPagesCount / 2 + 2);
    } else {
      toShowIndexes = initShowIndexes.filter((item, index) => index > 0 && index < totalPagesCount - 1);
    }
    if ([0, totalPagesCount - 1].indexOf(currentPageIndex) < 0) {
      while (toShowIndexes[0] > currentPageIndex) {
        this.leftMoveArray(toShowIndexes);
      }
      while (toShowIndexes[toShowIndexes.length - 1] < currentPageIndex) {
        this.rightMoveArray(toShowIndexes);
      }
    }
    return [
      initShowIndexes[0],
      toShowIndexes[0] > initShowIndexes[0] + 1,
      toShowIndexes,
      toShowIndexes[toShowIndexes.length - 1] < initShowIndexes[initShowIndexes.length - 1] - 1,
      initShowIndexes[initShowIndexes.length - 1],
    ];
  }

  navigateTo(pageId) {
    const { onNavigateTo, pageLimit } = this.props;
    onNavigateTo(pageId, pageLimit);
  }

  navigateToPrevious() {
    const previousPageId = this.state.currentPageIndex - 1;
    if (previousPageId >= 0) {
      this.navigateTo(previousPageId);
    }
  }

  navigateToNext() {
    if (this.state.currentPageIndex + 1 < this.state.totalPagesCount) {
      this.navigateTo(this.state.currentPageIndex + 1);
    }
  }

  render() {
    const { currentPageIndex, totalPagesCount } = this.props;

    const [firstIndex, leftEllipsis, middleArray, rightEllipsis, lastIndex] = this.renderNavButtons(currentPageIndex, totalPagesCount);

    const leftNavDisabled = currentPageIndex <= 0;
    const rightNavDisabled = currentPageIndex >= totalPagesCount - 1;
    const leftNavClass = `icon-black_pagination_left ${leftNavDisabled ? 'disabled' : ''}`;
    const rightNavClass = `icon-black_pagination_right ${rightNavDisabled ? 'disabled' : ''}`;

    return (
      <div id="pagination">
        <button key="left" onClick={this.navigateToPrevious}>
          <i className={leftNavClass} />
        </button>
        <button
          key={firstIndex}
          onClick={() => this.navigateTo(firstIndex)}
          className={firstIndex === currentPageIndex ? 'active' : ''}
        >
          {firstIndex === undefined ? 0 : firstIndex + 1}
        </button>
        {leftEllipsis &&
          <span className="ellipsis">...</span>
        }
        {
          middleArray.map(index => (
            <button
              key={index}
              onClick={() => this.navigateTo(index)}
              className={index === currentPageIndex ? 'active' : ''}
            >
              {!index ? 0 : index + 1}
            </button>
          ))
        }
        {rightEllipsis &&
          <span className="ellipsis">...</span>
        }
        {lastIndex !== firstIndex &&
          <button
            key={lastIndex}
            onClick={() => { this.navigateTo(lastIndex); }}
            className={lastIndex === currentPageIndex ? 'active' : ''}
          >
            {lastIndex === undefined ? 0 : lastIndex + 1}
          </button>
        }
        <button key="right" onClick={this.navigateToNext}>
          <i className={rightNavClass} />
        </button>

      </div>
    );
  }
}

Pagination.propTypes = {
  currentPageIndex: PropTypes.number,
  pageLimit: PropTypes.number,
  totalPagesCount: PropTypes.number,
  onNavigateTo: PropTypes.func,
};
